<template>
    <!-- 列表页面 -->
    <div class="tableSample" v-if="!showAdd && !showEdit">
        <div class="header">
            <div class="header-left">
                <p class="title">酒店房间信息
                    <el-button type="primary" plain style="margin-left: 30px;" @click="handleAdd" v-if="!isSuper">添加</el-button>
                </p>
            </div>
            <div class="header-right">
                <lin-search @query="onQueryChange" placeholder="请输入房间名称" style="margin-right: 15px;" />
                <!-- 省份选择下拉框 -->
                <el-select  size="medium" filterable v-model="province_id" style="margin-right: 15px;"  placeholder="请选择省份" @change="handleChangeProvince" clearable v-if="isSuper">
                    <el-option
                            v-for="(province, index) in provinceArr"
                            :key="index"
                            :label="province.name"
                            :value="province.id">
                    </el-option>
                </el-select>
                <!-- 城市选择下拉框 -->
                <el-select  size="medium" filterable v-model="city_id" style="margin-right: 15px;"  placeholder="请选择城市" @change="handleChangeCity" clearable v-if="isSuper">
                    <el-option
                            v-for="(city, index) in cityArr"
                            :key="index"
                            :label="city.name"
                            :value="city.id">
                    </el-option>
                </el-select>
                <!-- 区/县选择下拉框 -->
                <el-select  size="medium" filterable v-model="county_id" style="margin-right: 15px;"  placeholder="请选择地区" @change="handleChangeCounty" clearable v-if="isSuper">
                    <el-option
                            v-for="(county, index) in countyArr"
                            :key="index"
                            :label="county.name"
                            :value="county.id">
                    </el-option>
                </el-select>
                <el-select   size="medium" filterable v-model="lin_user_id" @change="handleChangeAdmin" placeholder="请选择酒店后台" clearable v-if="isSuper">
                    <el-option
                            v-for="(admin, index) in adminArr"
                            :key="index"
                            :label="admin.username"
                            :value="admin.id">
                    </el-option>
                </el-select>
            </div>
        </div>
        <!-- 表格 -->
        <el-table
                :data="tableData"
                stripe
                border
                v-loading="loading"
        >
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="name"
                    label="房间名称">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="title"
                    label="房间标题">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="price"
                    label="房间价格">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="estimate_price"
                    label="钟点房价格">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="recommend_name"
                    label="推荐首页"
                    v-if="isSuper">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="admin_user.username"
                    label="后台用户名">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="order_num"
                    label="订单数量">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="update_time"
                    label="更新时间">
            </el-table-column>
            <!-- 操作列 -->
            <el-table-column label="操作" fixed="right" width="180" >
                <template slot-scope="scope">
                    <el-button
                            type="primary"
                            plain
                            size="mini"
                            @click.native.prevent.stop="handleEdit(scope)"
                            v-if="!isSuper"
                    >编辑
                    </el-button>
                    <el-button
                            type="primary"
                            plain
                            size="mini"
                            @click.native.prevent.stop="handleEditOne(scope)"
                            v-if="isSuper"
                    >设置推荐
                    </el-button>
                    <el-button
                            type="danger"
                            plain
                            size="mini"
                            @click.native.prevent.stop="handleDelete(scope)"
                    >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :background="true"
                    :page-size="pageCount"
                    :current-page="currentPage"
                    v-if="refreshPagination"
                    layout="total, prev, pager, next, jumper"
                    :total="total_nums"
            ></el-pagination>
        </div>
        <el-dialog
                title="设置推荐"
                :visible.sync="dialogVisible"
                width="50%"
                :before-close="handleClose">
            <el-form :model="editForm" label-width="80px">
                <el-form-item label="排序" prop="order_sort">
                    <el-input type="number" v-model="editForm.order_sort" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="推荐">
                    <el-radio v-model="editForm.recommend" label="1">不推荐首页</el-radio>
                    <el-radio v-model="editForm.recommend" label="2">推荐首页</el-radio>
                </el-form-item>
                <el-form-item class="submit">
                    <el-button type="primary" @click="submitForm()">保 存</el-button>
                    <el-button @click="dialogVisible = false">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
    <!-- 添加页面 -->
    <room-add v-else-if="showAdd" @addClose="addClose" ></room-add>
    <!-- 修改页面 -->
    <room-edit v-else-if="showEdit" @editClose="editClose" :roomId="roomId" ></room-edit>
<!--    设置推荐-->
</template>
<script>
import room from '@/models/room'
import admin from '@/models/admin'
import LinSearch from '@/components/base/search/lin-search'
import RoomAdd from './RoomAdd'
import RoomEdit from './RoomEdit'
import User from '@/lin/models/user'
import province from '@/models/province'
import city from '@/models/city'
import county from '@/models/county'

export default {
  components: {
    RoomAdd,
    LinSearch,
    RoomEdit,
  },
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      loading: false,
      showAdd: false,
      showEdit: false,
      isSuper: false,
      lin_user_id: '',
      provinceArr: [], // 所有省份
      province_id: '', // 搜索的省份ID
      cityArr: [], // 根据省份选择城市
      city_id: '', // 搜索的城市ID
      countyArr: [], // 根据城市选择区县
      county_id: '', // 搜索的区县ID
      search: {
        name: '',
      },
      searchAdmin: '',
      adminArr: [],
      roomId: 0,
      editForm: {
        recommend: '1',
        order_sort: 1,
      },
      // 分页相关
      refreshPagination: true, // 页数增加的时候，因为缓存的缘故，需要刷新Pagination组件
      currentPage: 1, // 默认获取第一页的数据
      pageCount: 10, // 每页10条数据
      total_nums: 0, // 分组内的总数
    }
  },
  computed: {},
  created() {
    this.getAdminUser()
    this.getAdminAll()
    this.getProvinceAll()
  },
  methods: {
    handleEditOne(val) {
      this.dialogVisible = true
      this.roomId = Number(val.row.id)
      this.editForm.recommend = String(val.row.recommend)
      this.editForm.order_sort = String(val.row.order_sort)
    },
    handleClose(done) {
      done()
    },
    async getAdminAll() {
      this.adminArr = await admin.getAdminAll()
    },
    async getAdminUser() {
      this.loading = true
      const res = await User.getInformation()
      this.isSuper = res.isSuper
      if (res.linUserId > 1) {
        this.lin_user_id = res.linUserId
      }
      // 获取数据
      this._getTableData(this.currentPage, this.pageCount)
    },
    // 获取数据
    async _getTableData(start, count) {
      const res = await room.getRoomList(start, count, {
        name: this.search.name, lin_user_id: this.lin_user_id, province_id: this.province_id, city_id: this.city_id, county_id: this.county_id,
      })
      this.tableData = res.data
      this.total_nums = res.count
      this.$nextTick(() => {
        this.loading = false
      })
    },
    // 修改首页推荐
    async submitForm() {
      const self = this
      // eslint-disable-next-line no-unused-vars
      const info = {
        id: self.roomId,
        recommend: self.editForm.recommend,
        order_sort: self.editForm.order_sort,
      }
      try {
        // eslint-disable-next-line no-unused-vars
        const res = await room.updateRoomOne(info)
        if (res.error_code === 0) {
          self.$message.success(`${res.msg}`)
          self.loading = true
          self._getTableData(self.currentPage, self.pageCount)
          self.dialogVisible = false
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 改变管理员
    handleChangeAdmin() {
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    handleAdd() {
      if (this.tableData.length > 0) {
        this.orderSort = this.tableData[0].order_sort + 1
      }
      this.showAdd = true
    },
    rowClick(val) {
      console.log(val)
    },
    addClose() {
      this.showAdd = false
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    editClose() {
      this.showEdit = false
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    expandChange(row, expandedRows) {
      console.log(row, expandedRows)
    },
    handleCellSave(row) {
        row.editFlag = false; // eslint-disable-line
      setTimeout(() => {
        this.editRow--
        this.$message({
          type: 'success',
          message: '修改成功',
        })
      }, 1000)
    },
    // 切换分页
    async handleCurrentChange(val) {
      this.currentPage = val
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    handleEdit(val) {
      this.showEdit = true
      this.roomId = Number(val.row.id)
    },
    handleDelete(val) {
      this
        .$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(async () => {
          this.loading = true
          const res = await room.deleteRoom(val.row.id)
          if (res.error_code === 0) {
            this.$message.success(`${res.msg}`)
          }
          this._getTableData(this.currentPage, this.pageCount)
        })
    },
    // 搜索姓名
    onQueryChange(query) {
      this.search.name = query.trim()
      if (!query) {
        this._getTableData(1, 10)
        return
      }
      this.loading = true
      this.currentPage = 1
      this._getTableData(
        this.currentPage,
        this.pageCount,
      )
    },
    // 获取省份列表
    async getProvinceAll() {
      this.provinceArr = await province.getProvinceAll()
    },
    // 获取城市列表
    async getCityAll() {
      this.cityArr = await city.getCityAll({ province_id: this.province_id })
    },
    // 获取区县列表
    async getCountyAll() {
      this.countyArr = await county.getCountyAll({ province_id: this.province_id, city_id: this.city_id })
    },
    // 下拉框选择省份
    async handleChangeProvince() {
      this.currentPage = 1
      this.loading = true
      this.currentPage = 1
      this._getTableData(
        this.currentPage,
        this.pageCount,
      )
      this.city_id = ''
      this.county_id = ''
      this.getCityAll()
    },
    // 下拉框选择城市
    async handleChangeCity() {
      this.loading = true
      this.currentPage = 1
      this._getTableData(
        this.currentPage,
        this.pageCount,
      )
      this.county_id = ''
      this.getCountyAll()
    },
    // 下拉框选择区/县
    async handleChangeCounty() {
      this.currentPage = 1
      this.loading = true
      this.currentPage = 1
      this._getTableData(
        this.currentPage,
        this.pageCount,
      )
    },
  },
}
</script>

<style lang="scss" scoped>
    .tableSample {
        padding: 0 0 30px;

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30px;
            border-bottom: 1px solid #dae1ed;

            .header-left {
                float: left;

                .title {
                    height: 59px;
                    line-height: 59px;
                    color: $parent-title-color;
                    font-size: 16px;
                    font-weight: 500;
                }
            }

            .header-right {
                float: right;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }

        .table-main {
            padding: 0 30px;
            margin-top: 30px;
        }

        .top-operate {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            margin-top: 30px;
        }

        .sort-input {
            width: 50px;
            background: none;
            justify-content: space-around;
        }

        .table-edit {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            .content {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .cell-icon {
                cursor: pointer;
                color: #3963bc;
                font-size: 16px;
            }

            .cell-icon-edit {
                display: flex;
                margin-left: 20px;
                width: 50px;
                justify-content: space-between;

                .cell-cancel {
                    cursor: pointer;
                    color: #3963bc;
                    font-size: 16px;
                }

                .cell-save {
                    cursor: pointer;
                    color: #3963bc;
                    font-size: 16px;
                    margin-right: -20px;
                }
            }
        }

        .m-20 {
            margin-bottom: 10px;
            margin-top: 5px;
        }

        .summary {
            display: flex;
            justify-content: flex-start;
            flex-direction: row;

            img {
                width: 135px;
                height: 200px;
            }

            .demo-table-expand {
                font-size: 0;
                margin-left: 30px;
                display: flex;
                flex-direction: column;

                label {
                    width: 90px;
                    color: #99a9bf;
                }

                .el-form-item {
                    margin-right: 0;
                    margin-bottom: 0;
                    display: flex;
                    flex-direction: row;
                }
            }
        }

        .pagination {
            display: flex;
            justify-content: flex-end;
            margin: 20px;
        }
    }
    // dialog
    .tableSample /deep/ .el-dialog__footer {
        text-align: left;
        padding-left: 30px;
    }

    .tableSample /deep/ .el-dialog__header {
        padding-left: 30px;
    }

    .tableSample /deep/ .el-dialog__body {
        padding: 30px;
    }
</style>
